<template>
  <div @scroll="onScrollChange" class="home" ref="home">
    <!-- 头部导航 -->
    <navigation-bar :isShowBack="false" :navBarStyle="navBarStyle">
      <!-- 左侧插槽 -->
      <template v-slot:nav-left>
        <img :src="navBarCurrentSlotStyle.leftIcon" alt />
      </template>
      <!-- 中间插槽 -->
      <template v-slot:nav-center>
        <my-search
          :bgColor="navBarCurrentSlotStyle.search.bgColor"
          :hintColor="navBarCurrentSlotStyle.search.hintColor"
          :icon="navBarCurrentSlotStyle.search.icon"
        ></my-search>
      </template>
      <!-- 右侧插槽 -->
      <template v-slot:nav-right>
        <img :src="navBarCurrentSlotStyle.rightIcon" alt />
      </template>
    </navigation-bar>
    <div class="home-content">
      <!-- swiper -->
      <my-swiper :height="swiperHeight" :swiperImgs="swiperData.map(item => item.icon)"></my-swiper>
      <!-- 520 活动 -->
      <activity>
        <div class="activity-520">
          <img :key="index" :src="item.icon" alt v-for="(item, index) in activityDatas" />
        </div>
      </activity>
      <!-- 功能选项 -->
      <mode-options></mode-options>
      <!-- 秒杀模块 -->
      <seconds :dataSource="secondsDatas"></seconds>
      <!-- 拼购节 -->
      <activity>
        <div class="activity-pin-gou-jie">
          <img src="@img/pinGouJie.gif" />
        </div>
      </activity>
      <!-- 商品列表 -->
      <goods :isScroll="false" :layoutType="'3'"></goods>
    </div>
  </div>
</template>

<script>
import MySwiper from '@com/Swiper/MySwiper.vue'
import Activity from '@com/currency/Activity.vue'
import ModeOptions from '@com/currency/ModeOptions.vue'
import Seconds from '@com/seconds/Seconds.vue'
import Goods from '@com/goods/Goods.vue'
import NavigationBar from '@com/currency/NavigationBar.vue'
import MySearch from '@com/currency/Search.vue'
export default {
  name: 'Home',
  components: {
    MySwiper,
    Activity,
    ModeOptions,
    Seconds,
    Goods,
    NavigationBar,
    MySearch
  },
  data () {
    return {
      swiperData: [],
      swiperHeight: this.$store.state.isIphoneX ? '228px' : '184px',
      activityDatas: [],
      secondsDatas: [],
      navBarStyle: { // navBar 的定制样式
        position: 'fixed',
        backgroundColor: ''
      },
      // navBar 当前使用的插槽样式
      navBarCurrentSlotStyle: {},
      // 和 页面滑动到锚定点之后的插槽的样式（高亮样式）
      navBarSlotStyle: {
        // 默认样式
        normal: {
          // 左侧插槽
          leftIcon: require('@img/more-white.svg'),
          // 中间插槽
          search: {
            bgColor: '#ffffff',
            hintColor: '#999999',
            icon: require('@img/search.svg')
          },
          // 右侧插槽
          rightIcon: require('@img/message-white.svg')
        },
        // 高亮样式
        highlight: {
          // 左侧插槽
          leftIcon: require('@img/more.svg'),
          // 中间插槽
          search: {
            bgColor: '#d7d7d7',
            hintColor: '#ffffff',
            icon: require('@img/search-white.svg')
          },
          // 右侧插槽
          rightIcon: require('@img/message.svg')
        }
      },
      // 记录页面滚动值
      scrollTopValue: -1,
      // 锚点值 === 预估滑动多少距离改变样式
      ANCHOR_SCROLL_TOP: 160
    }
  },
  created () {
    this.navBarCurrentSlotStyle = this.navBarSlotStyle.normal
    this.initData()
  },
  /**
    * keepAlive 组件被激活的时候调用
    * 去为滑动模块指定滑动距离。
    */
  activated: function () {
    console.log('%c 🍎 activated: ', 'font-size:20px;background-color: #3F7CFF;color:#fff;')
    this.$refs.home.scrollTop = this.scrollTopValue
  },
  methods: {
    // 获取数据
    initData () {
      // axios 同时发送多个请求（并行）
      this.$http.all([
        this.$http.post('/swiper'),
        this.$http.post('/activitys'),
        this.$http.post('/seconds')
      ]).then(this.$http.spread((swiperData, activityData, secondsData) => {
        this.swiperData = swiperData.list
        this.activityDatas = activityData.list
        this.secondsDatas = secondsData.list
      }))
    },
    onScrollChange ($event) {
      // 获取到当前页面滚动的距离
      this.scrollTopValue = $event.target.scrollTop
      // 计算 navBar 背景颜色（navBar 背景透明度）
      let opacity = this.scrollTopValue / this.ANCHOR_SCROLL_TOP
      // 指定 narBar 插槽样式
      if (opacity >= 1) {
        this.navBarCurrentSlotStyle = this.navBarSlotStyle.highlight
      } else {
        this.navBarCurrentSlotStyle = this.navBarSlotStyle.normal
      }
      // 根据透明比例来设置 navBar 的背景颜色
      this.navBarStyle.backgroundColor = 'rgba(255, 255, 255, ' + opacity + ')'
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@css/style.scss';
.home {
  width: 100%;
  height: 100%;
  background-color: $bgColor;
  overflow: hidden;
  overflow-y: auto;
  &-content {
    height: 100%;
    .activity-520 {
      margin-top: px2rem(-8);
      border-top-left-radius: px2rem(8);
      border-top-right-radius: px2rem(8);
      img {
        display: inline-block;
        width: 33.33%;
      }
    }
    .activity-pin-gou-jie {
      background-color: white;
      margin-top: $marginSize;
      img {
        width: 100%;
      }
    }
  }
}
</style>
